<template>
  <el-dialog
    v-model="dialogTableVisible"
    title="创建员工账号"
    width="500"
    :close-on-click-modal="false"
    align-center
  >
    <div class="create-div">
      <span>工号</span>
      <el-input v-model="employeeId" placeholder="请输入工号" clearable></el-input>
    </div>
    <div class="create-div">
      <span>姓名</span>
      <el-input v-model="employeeName" placeholder="请输入员工姓名" clearable></el-input>
    </div>
    <div class="create-div">
      <span>手机号</span>
      <el-input v-model="employeePhoneNumber" placeholder="请输入员工手机号" clearable></el-input>
    </div>
    <div class="create-div">
      <span>登录密码</span>
      <el-input v-model="loginPassword" placeholder="请分配一个登录密码" clearable></el-input>
    </div>
    <div class="create-div">
      <span>员工职位</span>
      <el-select v-model="employeeRole" placeholder="请选择员工职位" style="width: 240px">
        <el-option
          v-for="item in employeeRoleData"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        />
      </el-select>
    </div>
    <div class="create-div">
      <span>员工性别</span>
      <el-select v-model="employeeGender" placeholder="请选择员工性别" style="width: 240px">
        <el-option
          v-for="item in employeeGenderData"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        />
      </el-select>
    </div>
    <div class="create-div">
      <span>员工婚姻状况</span>
      <el-select v-model="maritalStatus" placeholder="请选择员工婚姻状况" style="width: 240px">
        <el-option
          v-for="item in maritalStatusData"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        />
      </el-select>
    </div>
    <div class="create-div">
      <span>员工生日</span>
      <el-date-picker
        style="width: 240px"
        v-model="birthdays"
        type="date"
        placeholder="选择员工生日"
        value-format="YYYY-MM-DD"
        @change="changeBirthdays"
      />
    </div>
    <div class="create-div">
      <span>员工入职日期</span>
      <el-date-picker
        style="width: 240px"
        v-model="hireDate"
        type="date"
        placeholder="选择员工入职日期"
        value-format="YYYY-MM-DD"
        @change="changeHireDate"
      />
    </div>
    <div class="create-button">
      <el-button id="new-button" @click="submit" :loading="loadingButton">确定提交</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import {
  employeeRoleApi,
  employeeGenderApi,
  maritalStatusApi,
  createEmployeeAccountApi,
} from "@/api/api";
import { nullCheck, passwordCheck, phoneCheck } from "@/api/form-check";
// 显示或隐藏弹窗
const dialogTableVisible = ref(false);
// 父组件调用方法打开弹窗
const open = () => {
  dialogTableVisible.value = true;
};
defineExpose({ open });
watch(dialogTableVisible, async (newval) => {
  if (!newval) return;
  const res1 = await employeeRoleApi();
  const res2 = await employeeGenderApi();
  const res3 = await maritalStatusApi();
  employeeRoleData.value = res1.data;
  employeeGenderData.value = res2.data;
  maritalStatusData.value = res3.data;
});
interface Option {
  name: string;
  type: string;
}
// 存储员工身份数据
const employeeRoleData = ref<Option[]>([]);
// 存储员工性别数据
const employeeGenderData = ref<Option[]>([]);
// 存储婚姻状况
const maritalStatusData = ref<Option[]>([]);
// 存储输入框的值
const employeeId = ref("");
const employeeName = ref("");
const employeePhoneNumber = ref("");
const loginPassword = ref("");
const employeeRole = ref("");
const employeeGender = ref("");
const maritalStatus = ref("");
const birthdays = ref("");
const hireDate = ref("");
// 确定提交
const loadingButton = ref(false);
async function submit() {
  nullCheck(employeeId.value, "请输入工号");
  nullCheck(employeeName.value, "请输入姓名");
  phoneCheck(employeePhoneNumber.value);
  passwordCheck(loginPassword.value);
  nullCheck(employeeRole.value, "请选择员工职位");
  nullCheck(employeeGender.value, "请选择员工性别");
  nullCheck(maritalStatus.value, "请选择员工婚姻状况");
  nullCheck(birthdays.value, "请选择员工生日");
  nullCheck(hireDate.value, "请选择员工入职日期");
  loadingButton.value = true;
  await createEmployeeAccountApi({
    employeeId: employeeId.value,
    employeeName: employeeName.value,
    employeePhoneNumber: employeePhoneNumber.value,
    employeeRole: employeeRole.value,
    employeeGender: employeeGender.value,
    maritalStatus: maritalStatus.value,
    birthdays: birthdays.value,
    hireDate: hireDate.value,
    loginPassword: loginPassword.value,
  });
  loadingButton.value = false;
  dialogTableVisible.value = false;
  employeeId.value = "";
  employeeName.value = "";
  employeePhoneNumber.value = "";
  employeeRole.value = "";
  employeeGender.value = "";
  maritalStatus.value = "";
  birthdays.value = "";
  hireDate.value = "";
  loginPassword.value = "";
}
// 选择员工生日时触发
function changeBirthdays(val: string | null) {
  birthdays.value = val === null ? "" : val;
}
// 选择入职日期时触发
function changeHireDate(val: string | null) {
  hireDate.value = val === null ? "" : val;
}
</script>

<style scoped>
span {
  display: block;
  padding-bottom: 5px;
}
.create-div {
  padding: 5px 0;
}
.create-button {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
